import React, {Component} from 'react';
// key:尽量避免使用下标作为key的属性值。如果拥有头部添加操作不允许使用index作为key的属性值。
class App extends Component {
    state = {
        bookList:[
            {
                id:1,
                bookName:"天龙八部",
                author:"金庸"
            },{
                id:2,
                bookName:"圆月弯刀",
                author: "古龙"
            }
        ]
    }
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        bookList:[
                            ...this.state.bookList,
                            {
                                id:this.state.bookList.length+1,
                                bookName:"鹿鼎记",
                                author:"金庸"
                            }
                        ]
                    })
                }}>尾部添加</button>
                <button onClick={()=>{
                    this.setState({
                        bookList:[
                            {
                                id:this.state.bookList.length+1,
                                bookName:"鹿鼎记",
                                author:"金庸"
                            },
                            ...this.state.bookList
                        ]
                    })
                }}>头部添加</button>
                <h3>index</h3>
                {
                    // 点击尾部添加按钮之前
                    // <p key={0}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={1}>《圆月弯刀》--->古龙 <input type="text"/></p>
                    // 点击尾部添加按钮之后
                    // <p key={0}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={1}>《圆月弯刀》--->古龙 <input type="text"/></p>
                    // <p key={2}>《鹿鼎记》--->金庸 <input type="text"/></p>


                    // 点击头部添加按钮之前
                    // <p key={0}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={1}>《圆月弯刀》--->古龙 <input type="text"/></p>
                    // 点击头部添加按钮之后
                    // <p key={0}>《鹿鼎记》--->金庸 <input type="text"/></p>
                    // <p key={1}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={2}>《圆月弯刀》--->古龙 <input type="text"/></p>
                }
                {
                    this.state.bookList.map((item,index)=>(
                        <p key={index}>《{item.bookName}》--->{item.author} <input type="text"/></p>
                    ))

                }
                <hr/>
                <h3>id</h3>
                {
                    // 点击尾部添加按钮之前
                    // <p key={1}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={2}>《圆月弯刀》--->古龙 <input type="text"/></p>
                    // 点击尾部添加按钮之后
                    // <p key={1}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={2}>《圆月弯刀》--->古龙 <input type="text"/></p>
                    // <p key={3}>《鹿鼎记》--->金庸 <input type="text"/></p>


                    // 点击头部添加按钮之前
                    // <p key={1}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={2}>《圆月弯刀》--->古龙 <input type="text"/></p>
                    // 点击头部添加按钮之后
                    // <p key={3}>《鹿鼎记》--->金庸 <input type="text"/></p>
                    // <p key={1}>《天龙八部》--->金庸 <input type="text"/></p>
                    // <p key={2}>《圆月弯刀》--->古龙 <input type="text"/></p>
                }
                {
                    this.state.bookList.map(item=>(
                        <p key={item.id}>《{item.bookName}》--->{item.author} <input type="text"/></p>
                    ))
                }
            </div>
        );
    }
}

export default App;